<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4624745_5q9umqk3hzk.css">
    <style>
    .btn{
        background-color: aqua;
    }
    </style>
</head>
<body>
    <div id="app">
        <button @click="num++">+</button>
      <q-button :text="点击" width="110px" height="40px" :num="num" :round="true" @transfer="chuansong">
        <template #default>
          后跳转
        </template>
      </q-button>
    </div>    
</body>
<script src="./vue.js"></script>
<script>
    const{createApp,ref, reactive,computed}=Vue;
  let app=createApp({
        setup(){
         let num=ref(0) 
         function chuansong(a){
            num.value=a
         }
         return{
             num,
             chuansong
            }
        }
    })
    app.component('q-button',{
        props:{
            width:{
                type:[String,Number],
                default:"100px"
            },
            height:{
                type:[String,Number],
                default:"50px"
            },
            round:{
                type:[Boolean],
                default:false
            },
            roundSize:{
                type:Number,
                default:25
            },
            text:{
                type:[String,Number],
                default:"按钮"
            },
            num:{
                 type:[String,Number],
                default:"0"
            }
           
        },
        setup(props){
            let attr = computed(function(){
					  return  props
				  })
                  function add(){
                    emit('transfer',attr.value.num+1)
                  }
                  return{
                   attr
                  }

        },
        template:`<button class="btn" :style="{width:attr.width,
							height:attr.height,
							backgroundColor:attr.backgroundColor,
							borderRadius:attr.round?attr.roundSize+'px':0,}"
                            @click="add">{{text}}{{num}}<slot/></button>`

    })
        app.mount("#app")
</script>
</html>